<script setup>
import * as Cesium from 'cesium';
onMounted(() =>{
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjQ5ZThjOS1mNjBhLTRiMzAtOGU0Yi0xMWE5NjQyM2Y3ZjYiLCJpZCI6MTMxOTc5LCJpYXQiOjE2ODA1Njk1MTZ9.2fxItjlczdbOsfcLTE4H5x-viCEZ0-qql5AKlSS-aGE'
    const viewer = new Cesium.Viewer("CesiumRoam", {
      terrain: Cesium.Terrain.fromWorldTerrain(),
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      vrButton: false,
      //关闭点选出现的提示框
      selectionIndicator: false,
      infoBox: false,
      });
    viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权 
    viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000000),
          orientation: {
              heading: Cesium.Math.toRadians(0.0), // 水平偏角，默认正北 0
              pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下
              roll: 0.0 // 旋转角
          },
      });
    keyboardMapRoamingInit(viewer)
   // 键盘控制漫游
   keyboardMapRoamingRender(viewer);
})
function keyboardMapRoamingInit(viewer) {
    // 添加键盘监听事件
    document.addEventListener('keydown', keyDown, false);
    document.addEventListener('keyup', keyUp, false);

    // 为每一帧添加监听事件
    viewer.clock.onTick.addEventListener(function() {
        keyboardMapRoamingRender(viewer);
    });
}
// 定义事件组
let flags = {
    // 相机位置
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    moveUp: false,
    moveDown: false,
    // 相机姿态
    lookUp: false,
    lookDown: false,
    lookLeft: false,
    lookRight: false,
    twistLeft: false,
    twistRight: false,
    // 缩放
    zoomIn: false,
    zoomOut: false
}
function getFlagFromKeyboard(key) {
    switch (key) {
        // 按字符的Unicode编码
        // 相机位置
        case 87:
            return 'moveForward';
        case 83:
            return 'moveBackward';
        case 68:
            return 'moveRight';
        case 65:
            return 'moveLeft';
        case 81:
            return 'moveUp';
        case 69:
            return 'moveDown';
        // 相机姿态 
        case 38:
            return 'lookUp';
        case 40:
            return 'lookDown';
        case 37:
            return 'lookLeft';
        case 39:
            return 'lookRight';
        case 96:
            return 'twistLeft';
        case 110:
            return 'twistRight';
        // 缩放
        case 107:
            return 'zoomIn';
        case 109:
            return 'zoomOut';
        default:
            return undefined;
    }
  }
    function keyDown(event) {
    let flagName = getFlagFromKeyboard(event.keyCode);
    if (typeof flagName !== 'undefined') {
        flags[flagName] = true;
    }
    }
    function keyUp(event) {
    let flagName = getFlagFromKeyboard(event.keyCode);
    if (typeof flagName !== 'undefined') {
        flags[flagName] = false;
    }
    }
    function keyboardMapRoamingRender(viewer) {
    let camera = viewer.camera;
    let ellipsoid = viewer.scene.globe.ellipsoid;
    let cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;

    // 根据相机高度设置移动距离，比默认距离移动效果更好
    let moveRate = cameraHeight / 20.0;

    if (flags.moveForward) {
        camera.moveForward(moveRate);
    }
    if (flags.moveBackward) {
        camera.moveBackward(moveRate);
    }
    if (flags.moveLeft) {
        camera.moveLeft(moveRate);
    }
    if (flags.moveRight) {
        camera.moveRight(moveRate);
    }
    if (flags.moveUp) {
        camera.moveUp(moveRate);
    }
    if (flags.moveDown) {
        camera.moveDown(moveRate);
    }
    if (flags.lookUp) {
        camera.lookUp();
    }
    if (flags.lookDown) {
        camera.lookDown();
    }
    if (flags.lookLeft) {
        camera.lookLeft();
    }
    if (flags.lookRight) {
        camera.lookRight();
    }
    if (flags.twistLeft) {
        camera.twistLeft();
    }
    if (flags.twistRight) {
        camera.twistRight();
    }
    // 根据相机高度设置缩放参数
    if (flags.zoomIn) {
        camera.zoomIn(cameraHeight / 2);
    }
    if (flags.zoomOut) {
        camera.zoomOut(cameraHeight / 2);
    }
    }
 
</script>
<template>
<div id="CesiumRoam" class="roam"></div>
</template>
<style lang="less" scoped>
.CesiumRoam {
  position: relative;
  width: 100%;
  height: 100%;
}
</style> 